<template>
	<view class="cu-bar search bg-white">
		<view class="search-form round">
			<text class="cuIcon-search"></text>
			<input v-model="SearchStr" @focus="InputFocus" @blur="InputBlur" adjust-position="false" type="text" :placeholder="placeholder" confirm-type="search" />
		</view>
		<view class="action"><button @click="handleSearch" class="cu-btn bg-menu shadow-blur round">{{props.btnStr}}</button></view>
	</view>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/stores/index';
import { watch, computed, ref } from 'vue';
const setting = useSettingStore();
const emit = defineEmits(['action']);
let TabCur = ref(0);
let scrollLeft = ref(0);
const props = defineProps({
	isCard: {
		type: [Boolean, String],
		default: false
	},
	placeholder: {
		type: String,
		default: '搜索图片、文章、视频'
	},
	btnStr: {
		type: String,
		default: '搜索'
	}
});
const SearchStr = ref('')
const InputBottom = ref(0);
const InputFocus = (e: any) => {
	InputBottom.value = e.detail.height;
};

const InputBlur = () => {
	InputBottom.value = 0;
};
const handleSearch = (e: any) => {
	emit('action', SearchStr.value);
};
</script>

<style>
.swiper-item {
	height: 100%;
}
</style>
